<template>
  <div class="page">
    <div class="doctorShow-info width-style">
      <el-row>
        <el-col :span="6">
          <div class="grid-content img">
            <img src="../../assets/images/face.jpg" class="image-head" />
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content">
            <div class="doctor-name">{{data.doctorName}}</div>
            <div class="doctor-info-joint doctor-data">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">文章数：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content doctor-data-number">1008</div>
                </el-col>
              </el-row>
            </div>

            <div class="doctor-info-joint">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">所属单位：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content">{{data.unit}}</div>
                </el-col>
              </el-row>
            </div>
            <div class="doctor-info-joint">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">所属科室：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content">{{data.department}}</div>
                </el-col>
              </el-row>
            </div>
            <div class="doctor-info-joint">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">专业领域：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content">{{data.field}}</div>
                </el-col>
              </el-row>
            </div>
            <div class="doctor-info-joint">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">擅长疾病：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content">{{data.skilled}}</div>
                </el-col>
              </el-row>
            </div>
            <div class="doctor-info-joint">
              <el-row>
                <el-col :span="3">
                  <div class="grid-content">个人简介：</div>
                </el-col>
                <el-col :span="21">
                  <div class="grid-content doctor-introduction">
                    {{data.description}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="doctorShow-article width-style">
      <div class="article-show">
        <span class="iconfont icon-article">&#xe67d;</span>
        <span>个人文章展示</span>
      </div>
      <div class="article-list">
        <ArticleShow articleList=""/>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleShow from "../../components/articleShow.vue";
export default {
  name: "DoctorShow",
  layout: "personalCenterLayout",
  components: { ArticleShow },
  async asyncData({app,store,route}) {
    let doctorRes=await app.api.reqDoctorInfo(route.query.doctorId)
    return {
      data:doctorRes.data
    }
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.page {
  width: 100%;
  min-width: 1200px;
  text-align: left !important;
  min-height: calc(100vh - 65.5px);
  padding-top: 10px;
  box-sizing: border-box;
  background-color: #f6f7f9;
  .doctorShow-info {
    margin-top: 20px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    .image-head {
      width: 150px;
      height: 150px;
      border-radius: 100px;
      margin-top: 30px;
    }
    .doctor-info-joint {
      margin-top: 5px;
      text-align: left;
      font-size: 16px;
    }
    .doctor-name {
      font-size: 22px;
      text-align: left;
      margin-bottom: 10px;
    }
    .doctor-introduction {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .doctorShow-article {
    margin-top: 20px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    .article-show {
      text-align: left;
      padding-left: 10px;
      font-size: 18px;
      .icon-article {
        font-size: 26px;
        vertical-align: bottom;
        color: @themeColor;
      }
    }
    .article-list {
      width: 98%;
    }
  }
}
</style>